<template>
  <div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['cld:regularPlan:add']"
          icon="el-icon-plus"
          plain
          size="mini"
          type="primary"
          @click="handleAdd"
        >新建计划
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="regularPlanList" border>
      <el-table-column align="center" label="主题" prop="theme"/>
      <el-table-column align="center" label="客户查看" prop="customerView">
        <template slot-scope="scope">
          <span>{{ scope.row.customerView == 1 ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="计划日期">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.planStartTime,'{y}-{m}-{d}') }} - {{ parseTime(scope.row.planEndTime,'{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="项目" prop="projectNameArr"/>
      <el-table-column align="center" label="人员" prop="staffNameArr"/>
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['cld:regularPlan:edit']"
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
          >修改
          </el-button>
          <el-button
            v-hasPermi="['cld:regularPlan:remove']"
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :limit.sync="queryParams.pageSize"
      :page.sync="queryParams.pageNum"
      :total="total"
      @pagination="getList"
    />

    <!-- 添加或修改例会计划对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body width="60%" :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="关联项目" prop="projectIds">
              <el-select v-model="form.projectId" placeholder="请选择" @change="handleProjectChange">
                <el-option
                  v-for="item in projectListOptions"
                  :key="item.projectId"
                  :label="item.projectName"
                  :value="item.projectId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联人员" prop="staffIds">
              <el-select v-model="staffIds" multiple placeholder="请选择">
                <el-option
                  v-for="item in staffListOptions"
                  :key="item.staffId"
                  :label="item.staffName"
                  :value="item.staffId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="计划日期" prop="planTime">
              <el-date-picker
                v-model="form.planTimeList"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="例会主题" prop="theme">
              <el-input v-model="form.theme" placeholder="请输入例会主题"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户查看" prop="customerView">
              <el-radio-group v-model="form.customerView">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">
          <el-col :span="1.5">
            <el-button
              icon="el-icon-plus"
              plain
              size="mini"
              type="primary"
              @click="handleAddPlanDetails"
            >新建计划明细
            </el-button>
          </el-col>
        </el-divider>
        <div v-for="(item,index) in form.detailsList" :key="item.planDetailsId">
          <el-row>
            <el-col :span="20"><h3>{{item.title}}{{ index+1 }}</h3></el-col>
            <el-col :span="4" ><el-button style="float: right;margin-right: 20px;" type="danger" icon="el-icon-delete" circle @click="handleRemove(item)"></el-button></el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item :prop="'detailsList[' + index + '].content'" :rules="{
                required: true, message: '请选择', trigger: 'blur'
              }" label="工作内容">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入内容"
                  v-model="item.content" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addRegularPlan,
  delRegularPlan,
  getRegularPlan,
  listRegularPlan,
  updateRegularPlan
} from "@/api/cld/regularPlan";
import {getList} from '@/api/cld/project'
import {getListStaff} from '@/api/cld/staff'
export default {
  name: "RegularPlan",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 例会计划表格数据
      regularPlanList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      // 项目列表
      projectListOptions: [],
      // 人员列表
      staffListOptions: [],
      // 项目选择
      projectIds: [],
      // 人员选择
      staffIds: []
    };
  },
  created() {
    this.getList();
    // 查询项目
    this.handleGetProjectList();
  },
  methods: {
    /** 查询例会计划列表 */
    getList() {
      this.loading = true;
      listRegularPlan(this.queryParams).then(response => {
        this.regularPlanList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //查询项目列表
    handleGetProjectList(){
      getList({
        projectStatus: 2
      }).then( res => {
        this.projectListOptions = res.data;
      })
    },
    // 项目选择
    handleProjectChange(){
      // 查询人员接口
      this.staffIds = [];
      getListStaff({
        projectIds: this.form.projectId,
        staffStatus: 2
      }).then( res => {
        this.staffListOptions = res.data;
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        regularPlanId: null,
        projectId: null,
        staffId: null,
        planStartTime: null,
        planEndTime: null,
        customerView: 1,
        theme: null,
        detailsList: [],
        planTimeList: []
      };
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加例会计划";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const regularPlanId = row.regularPlanId || this.ids
      getRegularPlan(regularPlanId).then(response => {
        this.form = response.data;
        // this.projectIds = this.form.projectId?.split(',').map(Number);
        this.form.projectId = parseInt(this.form.projectId);
        this.handleProjectChange();
        this.staffIds = this.form.staffId?.split(',').map(Number);
        this.form.planTimeList = [this.parseTime(this.form.planStartTime),this.parseTime(this.form.planEndTime)];
        this.open = true;
        this.title = "修改例会计划";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // this.form.projectId = this.projectIds.join(',');
          this.form.staffId = this.staffIds.join(',');
          this.form.planStartTime = this.form.planTimeList[0];
          this.form.planEndTime = this.form.planTimeList[1];
          if (this.form.regularPlanId != null) {
            updateRegularPlan(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addRegularPlan(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const regularPlanIds = row.regularPlanId || this.ids;
      this.$modal.confirm('是否确认删除例会计划编号为"' + regularPlanIds + '"的数据项？').then(function () {
        return delRegularPlan(regularPlanIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    // 新增例会计划明细
    handleAddPlanDetails(){
      this.form.detailsList.push({
        title: '例会计划-'
      })
    },
    // 删除
    handleRemove(row){
      const index = this.form.detailsList.indexOf(row);
      if (index > -1) {
        this.form.detailsList.splice(index, 1);
      }
    }
  }
};
</script>
